//新增/编辑班组付款申请
<template>
  <div class="box">
    <h1>班级付费新增</h1>
    <el-form
      :model="addruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="110px"
      class="demo-ruleForm"
    >
      <el-form-item label="标题" prop="mustRequired">
        <el-input v-model="addruleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="施工组合同" prop="mustRequired">
        <template>
          <el-select
            ref="xialakuang"
            v-model="addruleForm.contract"
            placeholder="请选择施工组合同"
            @focus="contractFocus"
            @change="selectContent"
          >
            <el-option
              v-for="item in DropDownBox"
              :key="item.id"
              :value="item"
              :label="item.contractName"
            ></el-option>
          </el-select>
        </template>
      </el-form-item>
      <el-form-item label="关联项目">
        <el-input v-model="addruleForm.associatedItems" disabled></el-input>
      </el-form-item>
      <el-form-item label="活动时间" required>
        <el-col :span="11">
          <el-form-item prop="mustRequired">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
              v-model="addruleForm.paymentData"
              @focus="paymentTime"
              style="width: 100%"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label="拟付款金额" prop="mustRequired">
        <el-input v-model="addruleForm.paymentMoney"></el-input>
      </el-form-item>
      <el-form-item label="收款账户">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column
            align="center"
            type="index"
            :index="indexMethod"
            label="序号"
            width="100px"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="bankAccountName"
            label="户名"
            width="100px"
          >
          </el-table-column>
          <el-table-column align="center" prop="bankOpeningBank" label="开户行">
          </el-table-column>
          <el-table-column align="center" prop="bankAccountNum" label="账号">
          </el-table-column>
          <el-table-column align="center" label="选择" fixed="right">
            <template slot-scope="scope">
              <el-radio
                name="singleChoice"
                v-model="scope.row.collectionAccount"
                label="1"
                value="scope.row.id"
                @change="collectMoney(scope.row)"
                >&nbsp;</el-radio
              >
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item
        label="合同付款备注"
        style="text-align: left"
        prop="required"
      >
        <textarea
          v-model="addruleForm.remarks"
          name=""
          id=""
          cols="40"
          rows="8"
        ></textarea>
      </el-form-item>
      <el-form-item label="是否紧急" style="text-align: left">
        <el-switch
          v-model="state"
          active-color="#13ce66"
          inactive-color="#ff4949"
          @change="emergencyState"
        >
        </el-switch>
      </el-form-item>
      <el-form-item
        label="项目审批单"
        prop="mustRequired"
        style="text-align: left"
      >
        <el-upload
          ref="wenjian1"
          name="myFile1"
          class="upload-demo"
          action
          :auto-upload="false"
          :http-request="projectFile"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            文件格式为Word. Excel. PDF. JPG. PNG. ZIP等, 大小不超过10M
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item
        label="产值确认单"
        prop="mustRequired"
        style="text-align: left"
      >
        <el-upload
          ref="wenjian2"
          name="myFile2"
          class="upload-demo"
          action
          :auto-upload="false"
          :http-request="outputFile"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            文件格式为Word. Excel. PDF. JPG. PNG. ZIP等, 大小不超过10M
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item
        v-model="addruleForm.approver"
        label="审批人"
        prop="mustRequired"
        style="text-align: left"
      >
        <el-button type="primary" @click="SelectSS">选择审批人</el-button>
      </el-form-item>
      <el-form-item
        v-model="addruleForm.ccpeople"
        label="抄送人"
        prop="mustRequired"
        style="text-align: left"
      >
        <el-button type="primary" @click="SelectCC">选择抄送人</el-button>
      </el-form-item>
    </el-form>
    <div style="text-align: center">
      <el-button type="primary" @click="preservation">保存为草稿</el-button>
      <el-button type="primary" @click="submitToExamine">提交审核</el-button>
      <el-button @click="ret">取消</el-button>
    </div>

    <!-- 选择审批人 ----------------------------------------------------------------------->
    <el-dialog
      title="选择成员"
      :visible.sync="member_dialogVisible"
      width="45%"
    >
      <div class="member_content clearFix">
        <div class="member_input popupForm">
          <!-- 查询输入框 -->
          <el-form :model="member_form" class="clearFix">
            <el-form-item label="姓名" label-width="50px" style="float: left">
              <el-input
                v-model="member_form.member_name"
                autocomplete="off"
                placeholder="请选择"
                style="width: 120px"
                size="mini"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="所属部门"
              label-width="80px"
              style="float: left"
            >
              <el-select
                v-model="member_form.department"
                placeholder="请选择"
                style="width: 120px"
                size="mini"
              >
                <el-option label="部门一" value="bumen_a"></el-option>
                <el-option label="部门二" value="bumen_b"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="member_btn">
          <el-button type="primary" size="mini">查询</el-button>
          <el-button type="primary" size="mini">重置</el-button>
        </div>

        <div class="member_table">
          <el-table :data="member_table_data" border style="width: 100%">
            <el-table-column label="头像" width="100" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.touXIang" alt="加载失败" />
              </template>
            </el-table-column>
            <el-table-column
              property="name"
              label="姓名"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              property="phone"
              label="电话"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              property="deptName"
              label="部门"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              property="postName"
              label="岗位"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column property="todo" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  plain
                  size="mini"
                  @click="choiceSSID(scope.row)"
                  >选择</el-button
                >
                <el-button
                  type="danger"
                  plain
                  size="mini"
                  @click="choiceSSIDCancel(scope.row)"
                  >取消</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div
          slot="footer"
          class="dialog-footer"
          align="right"
          style="margin-top: 20px"
        >
          <el-button @click="member_dialogVisible = false" size="mini"
            >取 消</el-button
          >
          <el-button type="primary" @click="xuanze1" size="mini"
            >确 定</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!-- 选择抄送人-------------------------------------------------------------- -->
    <el-dialog
      title="选择成员"
      :visible.sync="member_dialogVisibleCC"
      width="45%"
    >
      <div class="member_content clearFix">
        <div class="member_input popupForm">
          <!-- 查询输入框 -->
          <el-form :model="member_form" class="clearFix">
            <el-form-item label="姓名" label-width="50px" style="float: left">
              <el-input
                v-model="member_form.member_name"
                autocomplete="off"
                placeholder="请选择"
                style="width: 120px"
                size="mini"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              label="所属部门"
              label-width="80px"
              style="float: left"
            >
              <el-select
                v-model="member_form.department"
                placeholder="请选择"
                style="width: 120px"
                size="mini"
              >
                <el-option label="部门一" value="bumen_a"></el-option>
                <el-option label="部门二" value="bumen_b"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="member_btn">
          <el-button type="primary" size="mini">查询</el-button>
          <el-button type="primary" size="mini">重置</el-button>
        </div>

        <div class="member_table">
          <el-table :data="member_table_data" border style="width: 100%">
            <el-table-column label="头像" width="100" align="center">
              <template slot-scope="scope">
                <img :src="scope.row.touXIang" alt="加载失败" />
              </template>
            </el-table-column>
            <el-table-column
              property="name"
              label="姓名"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              property="phone"
              label="电话"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              property="deptName"
              label="部门"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column
              property="postName"
              label="岗位"
              width="100"
              align="center"
            ></el-table-column>
            <el-table-column property="todo" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  type="danger"
                  plain
                  size="mini"
                  @click="choiceCCID(scope.row)"
                  >选择</el-button
                >
                <el-button
                  type="danger"
                  plain
                  size="mini"
                  @click="choiceCCIDCancel(scope.row)"
                  >取消</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div
          slot="footer"
          class="dialog-footer"
          align="right"
          style="margin-top: 20px"
        >
          <el-button @click="member_dialogVisibleCC = false" size="mini"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="member_dialogVisibleCC = false"
            size="mini"
            >确 定</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
let formData = new FormData();
export default {
  name: "AddClass",
  components: {},
  data() {
    return {
      host: axios.defaults.baseURL,
      state: false,
      radio: 1,
      DropDownBox: [],
      formLabelWidth: "120px",
      member_form: {
        member_name: "",
        department: "",
      },
      member_dialogVisible: false,
      member_dialogVisibleCC: false,
      member_table_data: [],
      addruleForm: {
        title: "",
        contract: "", //合同
        contractid: Number, //合同id
        associatedItems: "", //关联项目
        associatedItemsID: Number, //关联项目
        paymentData: "", //拟付款日期
        paymentMoney: "", //付款金额
        collectionAccount: "", //收款账户
        remarks: "", //备注
        stateEmergency: 0, //紧急 0 --- false
        projectCorrect1: "", //项目审批
        outputValue2: "", //产值确认
        approver: [], //审批人
        ccpeople: "", //抄送人
      },
      rules: {
        mustRequired: [{ required: true, message: "必填", trigger: "blur" }],
      },
      tableData: [],
      choiceButton1: false,
      choiceButton2: false,
    };
  },
  computed: {},
  methods: {
    indexMethod(index) {
      return index + 1;
    },
    //警告
    open4(str) {
      this.$message.error(str);
    },
    //成功
    open2(str) {
      this.$message({
        message: str,
        type: "success",
      });
    },
    //返回
    ret() {
      this.$router.go(-1); //返回上一层
      sessionStorage.removeItem("flowNum");
      this.qingkong();
    },
    // 收款账户
    collectMoney(value) {
      // console.log(value);
      this.addruleForm.collectionAccount = Number(value.collectionAccount);
    },
    // 事件聚焦
    paymentTime() {
      this.addruleForm.paymentData = "";
    },
    // 下拉框聚焦
    contractFocus() {
      this.DropDownBox = [];
      this.$batchApi.classMoneySelectFocus().then((data) => {
        // console.log(data.data.data);
        this.DropDownBox = data.data.data;
      });
    },
    //选择抄送人
    SelectSS() {
      this.member_dialogVisible = true;
      this.$batchApi.classMoneyTableSelectCC().then((data) => {
        console.log(data.data.data);
        this.member_table_data = data.data.data;
      });
    },
    // 审批人选择
    xuanze1() {
      this.member_dialogVisible = false;
    },
    SelectCC() {
      this.member_dialogVisibleCC = true;
      this.$batchApi.classMoneyTableSelectCC().then((data) => {
        // console.log(data.data.data);
        this.member_table_data = data.data.data;
      });
    },
    //选择审批人--按钮--确定
    choiceSSID(value) {
      this.addruleForm.approver.push(value.account);
    },
    //选择审批人--按钮--取消
    choiceSSIDCancel(value) {
      console.log(value.id);
    },
    //选择抄送--按钮--确定
    choiceCCID(value) {
      this.addruleForm.ccpeople = value.account;
      console.log(this.addruleForm.ccpeople);
    },
    //选择抄送--按钮--取消
    choiceCCIDCancel(value) {
      console.log(value.id);
    },
    // 下拉款----选中
    selectContent(value) {
      this.addruleForm.contractid = value.id;
      this.addruleForm.associatedItemsID = value.projectId;
      this.$batchApi
        .classMoneySelectChoose({
          projectId: value.projectId,
          constructionTeamId: value.constructionTeamId,
        })
        .then((data) => {
          // console.log(data.data.data);
          this.DropDownBox = data.data.data;
          this.addruleForm.contract = value.contractName;
          this.addruleForm.associatedItems = data.data.data.name;
          this.tableData = data.data.data.bankAccounts;
          this.$nextTick(() => {
            this.$refs.xialakuang.blur();
          });
        });
    },

    // 项目审批单-----上传
    projectFile(content) {
      formData.append("productionConfirmation", content.file);
    },
    // 产值确认单-----上传
    outputFile(content) {
      formData.append("projectApprovalForm", content.file);
      formData.append("title", this.addruleForm.title);
      formData.append(
        "constructionTeamContractId ",
        Number(this.addruleForm.contractid)
      ); //合同id
      formData.append("relatedProjectsId", this.addruleForm.associatedItemsID); //关联项目 ID
      formData.append("expectedDateOfPayment", this.addruleForm.paymentData); //拟付款日期
      formData.append("paymentAmount", Number(this.addruleForm.paymentMoney)); //付款金额
      formData.append(
        "accountToBeCreditedId",
        this.addruleForm.collectionAccount
      ); //收款账户ID
      formData.append("notesOnContractPayment", this.addruleForm.remarks); //备注
      formData.append("emergency", this.addruleForm.stateEmergency); //紧急
      formData.append(
        "proposerNum",
        Number(JSON.parse(sessionStorage.getItem("employee")).account)
      ); //申请人工号
      formData.append("auditUserNum", this.addruleForm.approver); //审批人  this.addruleForm.approver
      formData.append(
        "carbonCopyRecipients",
        Number(this.addruleForm.ccpeople)
      ); //抄送人
      formData.append("flowNum", sessionStorage.getItem("flowNum")); //流程号
      this.$batchApi.classMoneyAddData(formData).then((data) => {
        console.log(data.data);
        if (data.data.code == 200) {
          this.open2("上传成功");
          this.qingkong();
          this.ret();
        } else {
          this.open4("上传失败");
          this.qingkong();
        }
      });
    },
    //保存为草稿--状态--0
    preservation() {
      formData.append("auditStatus", 0); //提交状态
      this.$refs.wenjian1.submit();
      this.$refs.wenjian2.submit();
    },
    // 提交审核--状态--1
    submitToExamine() {
      formData.append("auditStatus", 1);
      this.$refs.wenjian1.submit();
      this.$refs.wenjian2.submit();
    },
    // 是否紧急
    emergencyState(value) {
      this.state == !this.state;
      value === true
        ? (this.addruleForm.stateEmergency = 1)
        : (this.addruleForm.stateEmergency = 0);
    },
    //qinkng
    qingkong() {
      this.addruleForm = {
        title: "",
        contract: "",
        contractid: "",
        associatedItems: "",
        associatedItemsID: "",
        paymentData: "",
        paymentMoney: "",
        collectionAccount: "",
        remarks: "",
        stateEmergency: 0,
        projectCorrect1: "",
        outputValue2: "",
        approver: "",
        ccpeople: "",
      };
    },
  },
  created() {},
};
</script>
<style scoped lang='less'>
.box {
  margin-left: 10%;
}
.el-form {
  padding: 20px;
  width: 80%;
  .el-form-item {
    .el-col {
      width: 40%;
    }
    .el-input,
    .el-select {
      width: 40%;
    }
  }
  .el-select {
    width: 100%;
  }
}
.el-table {
  font-size: 12px !important;
}
textarea {
  border: 1px solid #ccc;
  outline: none;
}

.popupForm {
  float: left;
  .el-form {
    padding: 0;
    width: 100%;
  }
}
.member_btn {
  float: left;
  padding-top: 8px;
  margin-left: 10%;
}
</style>